<template>
  <el-select
    v-model="selectData"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    @change="change"
    class="select"
  >
    <slot name="prefix" slot="prefix" />
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
      <slot :item="item" />
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'Aselect',
  props: {
    value: {
      type: [Number, String],
      default: null
    },
    options: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },

    placeholder: {
      type: String,
      default: '请选择',
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectData: null,
      dialogVisible: false,
      addData: {},
    };
  },
  watch: {
    value: {
      handler(val) {
        this.selectData = val;
      },
      immediate: true
    },
  },
  methods: {
    change(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    },
  },
};
</script>
<style lang="scss" scoped>
.select {
  width: 100%;
}
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: #B4C3DA ;
    color: #fff;
  }
</style>
